UserCSS - LINE風格的對話框
左側：[page.icon][{ message]
右側：[} message][page.icon]
code:style.css
/* アイコンの位置を少し下げる */
span.text > span > span > a.link.icon > img.icon {
margin-top: 0.5em;
}
/* 編集時はプレーンテキストになるように */
.line:not(.cursor-line) {
/* ふきだし本体 */
.deco-\{, .deco-\} {
display: inline-block;
max-width: calc(100% - 70px);
margin: auto 0;
margin-bottom: 1em;
font-size: 1em;
vertical-align: top;
border-radius: 0.4em;
word-break: break-all;
a, a:hover {
text-decoration: underline !important;
}
}
.deco-\{ {
padding: 0.25em 0.5em 0.25em 0.6em;
margin-left: 0.7em;
}
.deco-\} {
padding: 0.25em 0.3em 0.25em 0.5em;
text-align: left;
}
/* 右側ふきだしの右寄せ */
span:has(span.deco > span.deco-\}) {
text-align: right;
max-width: 500px;
}
/* 左側ふきだしの尻尾 */
span:has(+ span > span.deco > span.deco-\{) > a.icon::after {
content: "";
visibility: hidden !important;
margin-left: 0.25em;
}
span:has(+ span > span.deco > span.deco-\{):has(a.icon > img.icon)::after {
content: " ";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
}
/* 右側ふきだしの尻尾 */
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon) > a.icon::before {
content: "";
margin-left: 1em;
visibility: hidden !important;
}
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon)::before {
content: " ";
clip-path: polygon(0 0, 100% 50%, 0 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
}
/* 共通特定サイズ以上の時にメッセージサイズを制限*/ @media(min-width: 440px) {
span > span.deco > span.deco-\{,
span:has(span.deco > span.deco-\}) > span.deco > span.deco-\} {
max-width: 320px;
}
}
/* メッセージを改行可能にする */
visibility: hidden;
}
content: "\A";
white-space: pre;
}
}